<template>
  <div>
    <h1>WELCOME Dapianzi's Mall</h1>
    <Row :gutter="32">
      <Col :span="16" :offset="4" >
        <d-card shadow>
          <h2 slot="title">Card Title</h2>
          <div slot="footer">
            <Divider>.</Divider>
            <center>Dapianzi &copy; 2020</center>
          </div>
          <div>
            <Table :data="dataSorce" :columns="cols"></Table>
          </div>
        </d-card>
      </Col>
    </Row>
  </div>
</template>

<script>
export default {
  name: 'analysis',
  data: () => {
    return {
      cols: [
        { type: 'selection', width: 60, align: 'center' },
        { title: 'Name', minWidth: 160, key: 'name' },
        {
          title: 'Attack',
          minWidth: 100,
          key: 'atk',
          sortable: true
        },
        { title: 'Strength', minWidth: 100, key: 'str' },
        { title: 'Agility', minWidth: 100, key: 'agi' },
        { title: 'Intelligence', minWidth: 100, key: 'int' }
      ]
    }
  },
  computed: {
    dataSorce () {
      let list = []
      for (let i = 0; i < 10; i++) {
        list.push({
          name: 'Hero ' + i,
          atk: 30 + Math.trunc(Math.random() * 50),
          str: 5 + Math.trunc(Math.random() * 10),
          agi: 5 + Math.trunc(Math.random() * 10),
          int: 5 + Math.trunc(Math.random() * 10)
        })
      }
      return list
    }
  }
}
</script>

<style scoped>

</style>
